<template>
	<view class="map-page">
		<map id="map" class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
			@regionchange="regionchange"></map>
		<!-- <cover-view class="btn-box">
			<cover-view class="btn" @click="submit">确认并保存</cover-view>
		</cover-view> -->
		<!-- <view @click="localBack" class="position-box">
			<image src="@/static/svg/loaction.svg" mode=""></image>
		</view> -->
	</view>
</template>
<script>
	import amap from '@/common/amap-wx.js';
	export default {

		data() {
			return {
				// latitude: 30.659462,
				// longitude: 115.065735,
				covers: [],
			}
		},
		props: ["latitude", "longitude"],
		created() {
			console.log("触发没")
			this.setCovers(this.latitude, this.longitude)
		},
		watch: {
			latitude: {
				handler(n, o) {
					this.setCovers(this.latitude, this.longitude)
				},
				deep: true,
				immediate: true
			},
			longitude: {
				handler(n, o) {
					this.setCovers(this.latitude, this.longitude)
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			localBack() {
				let mapObjs = uni.createMapContext('map', this)
				mapObjs.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude
				}, {
					complete: res => {
						console.log('移动完成:', res)
					}
				})
			},

			regionchange(e) {
				if (e.type === 'end') {
					let {
						latitude,
						longitude
					} = e.detail.centerLocation;
					this.setCovers(latitude, longitude);
				} else if (e.type == 'regionchange') {
					let self = this
					this.mapContext = uni.createMapContext("map", this);
					this.mapContext.getCenterLocation({
						type: 'gcj02',
						success: (res) => {
							let {
								latitude,
								longitude
							} = res;
							this.setCovers(latitude, longitude);
							console.log(res, 'regionchange')
						},
						fail: (err) => {
							console.log(err, 'regionchangeerr')
							// console.log('获取当前地图中心的经纬度2', err);
						}
					})
				}
			},
			//设置点位
			setCovers(latitude, longitude) {
				let location = {
					id: 0,
					latitude: Number(latitude),
					longitude: Number(longitude),
					width: uni.upx2px(20),
					height: uni.upx2px(20),
					iconPath: '../static/svg/loaction.svg'
				}
				this.covers = [location]

			},


		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.map-page {
		height: 100%;
		position: relative;

		.map {
			width: 100%;
			height: 100%;
		}

		.position-box {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			background-color: white;
			border-radius: 50%;
			height: 60rpx;
			width: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			>image {
				height: 70%;
				width: 70%;
			}
		}
	}
</style>